<template>
    <div class="TaskWarp">
        <div class="divMain DanXuan" @click.stop>
            <div class="divTitle" v-if="!Questions.transit">
                <h2>{{Questions.child.QtypeName}}：{{Questions.child.QuestionRemark}}</h2>
            </div>
            <div class="tigan" v-html="Questions.child.stem[0].StemContent"></div>
            <div class="divContent" :style='{top: !Questions.transit? divContentTop:divContentMinTop}'>
                <div class="touchMove" @touchstart="TOUCHMOVE" @mousedown="TOUCHMOVE" v-if="!Questions.transit"></div>
                <div class="boxContent">
                    <div class="itemWarp">
                        <div class="divItem" v-for="(item,index) in Questions.child.stem[0].opts" :class="{selected:item.OptionNumber==defAnswer.Answer}" @click="SetAnswer(item.OptionNumber)">
                            <i class="SerialNum">{{item.OptionNumber}}</i>
                            <div class="DanXuanOpts" v-html="item.OptionContent"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <transition enter-active-class="animated zoomIn">
            <bigImg :imgSrc="bigImgInfo" v-if="bigImgInfo.src != ''"></bigImg>
        </transition>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import AnswerHelper from '../../../../assets/js/AnswerHelper.js'
export default {
    name: "danXuan",
    props: ["Questions","defAnswer"],
    computed: mapGetters([
        'divContentTop',
        'divContentMinTop'
    ]),
    methods: {
        ...mapActions([
            'TOUCHMOVE'
        ]),
        SetAnswer(answer){
            this.defAnswer.AnswerTimeJsCut=new Date().getTime()
            this.defAnswer.Answer=answer
            AnswerHelper.SetAnswer(this.defAnswer)
        }
    },
    mounted() {
        var _this = this        
        $('.boxContent img').each(function () {
            $(this).upImgSrc()
            $(this).on('dblclick', function () {
                _this.bigImgInfo.src = $(this).attr('src')
            })
        })

        $('.divItem').css({
            lineHeight: $('.divItem').height() + 'px'
        })
        window.onresize = function () {
            $('.divItem').css({
                lineHeight: $('.divItem').height() + 'px'
            })
        }
    },
    data() {
        return {
            bigImgInfo: {
                src: ''
            }
        }
    }
}


</script>

<style lang="scss" rel="stylesheet/scss">
.DanXuanOpts {
    display: inline;
    height: 100%;
    p {
        display: inline;
    }
    img {
        /*height: 80px;*/
    }
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
@import '../../../../assets/css/public.scss';

.TaskWarp {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    .divMain {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        .divContent {
            position: absolute;
            top: 140px;
            left: 0;
            width: 100%;
            overflow: hidden;
            height: 100%;
            .boxContent {
                overflow: scroll;
                .itemWarp {
                    height: 80%;
                    overflow: auto;
                    display: flex;
                    flex-direction: column;
                    .divItem {
                        height: 14%;
                        margin: 1em auto;
                        width: 80%;
                        padding: 0 54px;
                        border-radius: 20px;
                        box-shadow: 0 2px 8px 0 #c5d0da;
                        img {
                            height: 80px
                        }
                        .OptionsIndex {
                            position: absolute;
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background: #007aff;
                            line-height: 40px;
                            text-align: center;
                            color: #fff;
                            top: 20px;
                            left: 10px;
                        }
                        * {
                            font-size: 24px;
                        }
                    }
                }
            }
        }
        .current span {
            color: #666;
        }
    }
}
.boxContent .selected{
    background:#00ABED;
}
</style>
